<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        padding: 10px 20px;
      }
    </style>
  </head>
  <body>
    <p>
      <button id="btn1">设置本地存储-setItem</button>
    </p>
    <p>
      <button id="btn2">获取本地存储-getItem</button>
    </p>
    <p>
      <button id="btn3">删除本地存储-removeItem</button>
    </p>
    <p>
      <button id="btn4">清空本地存储-clear</button>
    </p>
    <script>
      // 1. 介绍 localStroage
      /*
            a. HTML5 更新的js部分，可以使用浏览器的本地缓存
            b. 一共两个 localStorage  \  sessionStroage
            c. session cookie 一般来说都是后端设置的
            d. 一般来说，最大的是5M， 有的浏览器支持最大存10M
            e. setItem, getItem, removeItem, clear
        */

      //   web存储技术，都是通过Application的位置查看
      /*
         1.1 可以手动进行添加数据
         1.2 当前的数据存储，跟其他的页面或者网站没有关系
         1.3 数据存储在硬盘上，页面关闭了之后，再打开还存在
                需要手动销毁
      */

      // 为了简单演示，不加获取dom了，因为id是唯一的，可以直接写，但不推荐
      btn1.onclick = function () {
        // 参数1和参数2，都是字符串类型
        window.localStorage.setItem('score', 80)
      }

      btn2.onclick = function () {
        // 只有一个参数，对应的键是字符串类型
        // console.log(window.localStorage.getItem('score'))

        // 获取的是引用数据类型，一定要转换为具体对象
        console.log(JSON.parse(localStorage.getItem('score')))
      }

      btn3.onclick = function () {
        // 只有一个参数，对应的键是字符串类型
        localStorage.removeItem('score')
      }

      btn4.onclick = function () {
        // 不需要传参
        localStorage.clear()
      }

      //   只有基本数据类型，才可以直接写，不然需要转字符串先
      btn1.onclick = function () {
        // 参数1和参数2，都是字符串类型
        // window.localStorage.setItem('score', 80)
        // window.localStorage.setItem('score', true)
        // window.localStorage.setItem('score', undefined)
        // window.localStorage.setItem('score', null)

        // 如果是数组，默认会先把数组toString()
        // window.localStorage.setItem('score', [1, 2, 3])
        // 对象的toString 就是 [object Object]
        // window.localStorage.setItem('score', { name: 'zs' })

        // 一般在存储引用数据类型的时候，要先转换为字符串
        localStorage.setItem('score', JSON.stringify([1, 2, 3]))
      }

      // 字符转换的方法
      //   JSON.stringify()  把引用数据类型转换为字符
      //   JSON.parse()      把字符的引用数据转换为真正的数据

      // 作用1: 深拷贝(不建议，会丢失数据)
      const obj = { id: 1, info: undefined, fn: function () {} }
      //   const obj1 = obj
      const obj1 = JSON.parse(JSON.stringify(obj))
      console.log(obj === obj1)

      //   作用2： 正常转换数据
      //   console.log(JSON.stringify(obj))
      const str = 'asads'
      console.log(JSON.stringify(str))
      console.log(JSON.parse(obj))
      // Error Unexpected token o in JSON at position 1
    </script>
  </body>
</html>
